<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/player.css">
    <script src="js/searchAnim.js"></script>
</head>

<body>
    <div class="wrap">

        <!-- 快捷导航start -->
        <section class="shortcut">
            <div class="w">
                <!-- 左侧盒子 -->
                <div class="fl">
                    <ul>
                        <li><a href="#">欢迎来到秀秀的MP3,请尽情搜索你喜欢的歌曲！<em>|</em></a></li>
                    </ul>
                </div>

        </section>
        <!-- 快捷导航end -->

        <div class="play_warp w" id="app">
            <!-- logo部分开始 -->
            <div class="logo">
                <h1>
                    <a href="#" title="秀儿爱音乐">
                        <img src="./images/mm01.png" alt="">
                        <img src="./images/mm02.png" alt="">
                    </a>
                </h1>
            </div>
            <!-- logo部分结束 -->
            <!-- 播放主体区域 -->
            <!-- 搜索歌曲开始-->
            <div class="searchBar">
                <input type="text" v-model="query" @keyup.enter="searchMusic">
                <input type="button" value="" class="search-btn iconfont">
            </div>
            <!-- 搜索歌曲结束-->

            <!-- 歌曲信息列表开始 -->
            <div class="center_con w">
                <div class="jieshao">
                    <p>歌&nbsp;&nbsp;名</p>
                    <p>歌&nbsp;&nbsp;手</p>
                </div>
                <div class="song_wrapper">
                    <ul>
                        <li v-for="item in musicList">
                            <a href="javascript:;" @click="playerMusic(item.id)"></a>
                            <b>{{item.name}}</b><i>{{item.artists[0].name}}</i>
                            <span v-if="item.mvid!=0" @click="playMv(item.mvid)"></span>
                        </li>
                    </ul>
                </div>
                <!-- 歌曲信息列表结束 -->
                <!-- 黑胶碟片 -->
                <div class="pic">
                    <img :src="musicCover" alt="" id="wait-icon">
                </div>

                <!-- 播放器 -->
                <div class="auto_con w">
                    <audio ref="audio" @play="play" @pause="pause" :src="musicUrl" controls="controls" autoplay="autoplay" loop="loop" class="myaudio"></audio>
                </div>
                <!-- mv -->
                <div class="vidio_con">
                    <video :src="MvUrl" autoplay="autoplay" class="video"></video>
                    <div class="mask"></div>
                </div>

            </div>




        </div>

        </div>

        <!-- vue开发版本 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <!-- 官网axios在线地址 -->
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="js/min.js"></script>
</body>

</html>